import React, { useState, useEffect, useRef } from 'react';
import { doFetch } from "@/utils/doFetch"
import { Result, Button, Card, Input, Menu, Dropdown, Grid, Tabs, Carousel, Divider, Row, Col } from 'antd';
import { RightOutlined, ArrowRightOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import SectionTitle from '@/components/SectionTitle';
const { TabPane } = Tabs;
const { Meta } = Card;
const { useBreakpoint } = Grid;
let col = { xs: 24, sm: 12, md: 12, lg: 12, xl: 8, xxl: 6 },
    cols = { xs: 24, sm: 24, md: 16, lg: 15, xl: 14, xxl: 12 };


export default function App() {
    const [vs, cvs] = useState(false), [curkey, setcurkey] = useState(""),
        [treedata, settreedata] = useState([]),
        [seconddata, setseconddata] = useState([]),
        [thirddata, setthirddata] = useState([]),
        [imglist, setimglist] = useState([]),
        [noticelist, setnoticelist] = useState([]),
        carousel = useRef();




    const screens = useBreakpoint();

    useEffect(() => {
        doFetch({ url: "/ngic-promote-product/umProductCategory/queryTreeList", params: {} }).then(res => {
            settreedata(res.data.dataList)
        })
        doFetch({ url: "/ngic-promote-website/resImg/queryList", params: { imgStatus: 1 } }).then(res => {
            setimglist(res.data.dataList)
        })
        doFetch({ url: "/ngic-promote-website/resAnnounce/queryList", params: { pageIndex: 1, pageSize: 6 } }).then(res => {
            console.log(res.data);
            setnoticelist(res)
        })
    }, []);


    return (
        <div style={{ height: 'auto', overflow: "hidden" }}>
            <div style={{ padding: 20, paddingTop: 0 }}>
                <div className="content spacebt" style={{ height: !screens.md ? 200 : 570, overflow: "hidden" }}>
                    {
                        !screens.md ? <></> : <ul className="ulslider">
                            {
                                treedata && treedata.map((it, i) => {
                                    return <li
                                        onMouseEnter={() => {
                                            if (it.children && it.children.length > 0) {
                                                cvs(true)
                                            }
                                            if (it.children == seconddata) {
                                                return
                                            }
                                            setseconddata(it.children || []);
                                            setthirddata([])
                                            setcurkey("")
                                        }}
                                        onMouseLeave={() => {
                                            cvs(false)
                                        }}
                                    >
                                        <span>
                                            {it.title}
                                        </span>
                                        <RightOutlined style={{ fontSize: 12 }} />
                                    </li>
                                })
                            }
                        </ul>
                    }
                    <div style={{ width: !screens.md ? "100%" : "calc( 100% - 200px)", backgroundColor: "lightblue", position: "relative", height: "100%", overflow: "hidden" }}>
                        <div
                            onMouseEnter={() => {
                                cvs(true)
                            }}
                            onMouseLeave={() => {
                                cvs(false)
                            }}
                            style={{ padding: 20, display: "flex", position: "absolute", width: "100%", height: "100%", backgroundColor: "#f9f9f9", zIndex: 9999, left: vs ? 0 : "-100%", top: 0, transition: "all 0.2s", opacity: vs ? 1 : 0 }}>
                            <div style={{ flex: 1 }}>
                                {
                                    seconddata && seconddata.filter((it, i) => i < 6).map((it, i) => {
                                        return <div style={{ width: "100%", overflow: "hidden" }} onMouseEnter={() => {
                                            setcurkey(it.key)
                                        }}>
                                            <div className={it.key == curkey ? 'diycardactive' : "diycards"} style={{ float: "left", margin: "0 10px 10px 0", transition: "all 0.4s" }}>
                                                <span>
                                                    {it.title}
                                                </span>
                                            </div>
                                            {
                                                it.children && it.children.map((item, i) => {
                                                    return <div style={{ float: "left", margin: "4px 0px 4px 0" }} onClick={() => {
                                                        setthirddata(item.children || [])
                                                    }}>
                                                        <a className='heia'>
                                                            {item.title}
                                                        </a>
                                                        {
                                                            i == it.children.length - 1 ? null : <Divider type="vertical"></Divider>
                                                        }

                                                    </div>
                                                })
                                            }
                                        </div>
                                    })
                                }
                            </div>

                        </div>
                        <Carousel autoplay >
                            {
                                imglist ? imglist.map((it, i) => {
                                    return <div key={i} className="carousels" >
                                        <div style={{ height: !screens.md ? 200 : 570, background: `url(${it.imgUrl}) no-repeat center`, backgroundSize: "cover" }}></div>
                                    </div>
                                }) : <div className="carousels" >
                                    <div style={{ height: !screens.md ? 200 : 570, background: `url(${require("@/assets/banner.png")}) no-repeat center`, backgroundSize: "cover" }}></div>
                                </div>
                            }
                        </Carousel>
                    </div>
                </div>
                <div className="contents row" style={{ marginTop: 12 }}>
                    <div style={{ width: 36, display: "block", flexShrink: 0 }} >
                        <img src={require("@/assets/notice.png")} alt="" style={{ width: 36, display: "block", flexShrink: 0, marginTop: 15 }} />
                    </div>
                    <div style={{ width: "calc( 100% - 72px)", }}>
                        <Carousel dotPosition={"left"} dots={false} autoplay>
                            <div>
                                <a className="oneline" style={{ height: 46, lineHeight: "46px", width: "100%", paddingLeft: 12, color: "#ff4800" }}>1. 我们不加班，重要的事情说三遍</a>
                            </div>
                            <div>
                                <a className="oneline" style={{ height: 46, lineHeight: "46px", width: "100%", paddingLeft: 12, color: "#ff4800" }}>1. 我们不加班，重要的事情说三遍</a>
                            </div>
                        </Carousel>
                    </div>
                    <div style={{ width: 36, display: "block", flexShrink: 0 }} >
                        <a style={{ marginTop: 12, display: "block", color: "#ff4800" }}>更多</a>
                    </div>
                </div>
            </div>

            <div style={{ backgroundColor: "#f9f9f9", padding: 20 }}>

                <div className="contents" style={{ height: "auto" }}>
                    <SectionTitle extra={<div className="rowcenter">
                        <ArrowLeftOutlined className="hoverable" onClick={() => {
                            carousel.current.prev()
                        }} />
                        <div style={{ width: 48, height: 4 }}></div>
                        <ArrowRightOutlined className="hoverable" onClick={() => {
                            carousel.current.next()
                        }} />

                    </div>} size="large">
                        优质供应商
                    </SectionTitle>
                    <div style={{ height: 400, marginTop: 20 }}>
                        <Carousel ref={carousel}>
                            <div className="carousels">
                                <div style={{ width: "100%", height: 390, }}>
                                    <Row gutter={12}>
                                        {[0, 1, 2, 3, 4, 5].map(it => {
                                            return <Col {...col} key={it} style={{ marginBottom: 12 }}>
                                                <Card
                                                    hoverable
                                                    style={{ width: "100%", }}
                                                    cover={<div className="rowcenter" style={{ width: "100%", height: 88, overflow: 'hidden', display: "flex" }}>
                                                        <div style={{ flex: 1 }}>
                                                            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ width: "100%" }} />
                                                        </div>
                                                        <div style={{ flex: 1 }}>
                                                            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ width: "100%" }} />
                                                        </div>
                                                        <div style={{ flex: 1 }}>
                                                            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ width: "100%" }} />
                                                        </div>
                                                    </div>}
                                                >
                                                    <Meta title="Europe Street beat" description="www.instagram.com" />
                                                </Card>
                                            </Col>
                                        })}
                                    </Row>
                                </div>
                            </div>

                            <div className="carousels">
                                <div style={{ width: "100%", height: 390 }}>
                                    <Row gutter={12}>
                                        {[0, 1, 2, 3, 4, 5].map(it => {
                                            return <Col {...col} key={it} style={{ marginBottom: 12 }}>
                                                <Card
                                                    hoverable
                                                    style={{ width: "100%", }}
                                                    cover={<div className="rowcenter" style={{ width: "100%", height: 88, overflow: 'hidden', display: "flex" }}>
                                                        <div style={{ flex: 1 }}>
                                                            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ width: "100%" }} />
                                                        </div>
                                                        <div style={{ flex: 1 }}>
                                                            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ width: "100%" }} />
                                                        </div>
                                                        <div style={{ flex: 1 }}>
                                                            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ width: "100%" }} />
                                                        </div>
                                                    </div>}
                                                >
                                                    <Meta title="Europe Street beat" description="www.instagram.com" />
                                                </Card>
                                            </Col>
                                        })}
                                    </Row>
                                </div>

                            </div>
                        </Carousel>
                    </div>
                </div>
            </div>





        </div>
    )
}
